<template>
  <div class="root" v-if="echongs">
    <div>
      <p>{{ likes.module_name_for_google_utm }}</p>
      <div>
        <div class="lianglie"  v-for="(v, i) in newLikeList" :key="i">
          <div :id="item.gid" @click="xqychange(item.gid)" v-for="(item, inx) in v" :key="inx">
            <div
              v-lazy-container="{
                selector: 'img',
                error: 'https://wap.epet.com/app/images/error.png',
                loading: 'https://wap.epet.com/app/images/loading.png',
              }"
            >
              <img
                class="Likeimg"
                v-if="item.img"
                :data-src="item.img.img_url"
                alt=""
              />
            </div>
            <p class="thitlegl">{{ item.title }}</p>
            <span class="xhage"
              >{{ item.goods_properties[0] }} |{{ item.goods_properties[1] }}|
              {{ item.goods_properties[2] }}</span
            >
            <p class="price">
              <span>￥{{ item.normal_price.price }}</span
              >&nbsp;&nbsp;&nbsp;<span
                :style="{ backgroundColor: item.normal_price.tag_color_flag }"
                >{{ item.normal_price.tag_content }}</span
              >
            </p>
            <img
              v-if="item.subscribe.complete_logo_img"
              class="weikd"
              width=".9rem"
              :src="item.subscribe.complete_logo_img.img_url"
              alt=""
            />
            <div class="hdjx">
              <img
                v-if="item.rank_detail.icon_img"
                class="jhbz"
                :src="item.rank_detail.icon_img.img_url"
                alt=""
              />
              <span class="mingc">{{ item.rank_detail.message }}</span>
            </div>
            <a class="zhanwei"></a>
          </div>
        </div>
      </div>
    </div>

    <div v-show="conditions" class="buttombu">
      <p>
        <span>触屏版</span>&nbsp;&nbsp;&nbsp;<span>手机客户端</span>&nbsp;&nbsp;&nbsp;<span>关于我们</span
        ><span>联系我们</span>
      </p>
      <p>© wap.epet.com 版权：重庆易宠科技有限公司</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "like",
  data() {
    return {
      newLikeList: null,
      thisinx: 1,
      conditions:false
    };
  },
  computed: {
    ...mapState(["echongs"]),
    likes() {
      return this.echongs.data.datas.list[7];
    },
  },
  mounted() {
    // console.log(this.echongs.data.datas.list[8]);
    let likeList = this.likes.data.list;
    // console.log(likeList);
    let newLikeList = [[], []]; //由于只有两列，因而内部应该有两个数组
    for (let index = 1; index < likeList.length; index++) {
      if (index % 2 == 0) {
        newLikeList[1].push(likeList[index]);
      } else {
        newLikeList[0].push(likeList[index]);
      }
    }
    this.newLikeList = newLikeList;
    // console.log(newLikeList);
    this.busvue.$on("isend",(data)=>{
        // console.log(data);
        this.conditions = data
    })
    this.busvue.$on("addcLikes", (data) => {
      //   console.log(data, "------我接受到了");
      this.thisinx++;
      for (let index = 1; index < data.length; index++) {
        if (this.thisinx % 2 == 0) {
          if (index % 2 == 0) {
            this.newLikeList[0].push(likeList[index]);
          } else {
            this.newLikeList[1].push(likeList[index]);
          }
        } else {
          if (index % 2 == 0) {
            this.newLikeList[1].push(likeList[index]);
          } else {
            this.newLikeList[0].push(likeList[index]);
          }
        }
      }
    });
  },
  methods: {
     xqychange(gid){
      this.$router.push({
        name:'spInfo',
        query:{gid}
      })
    }
  },
};
</script>

<style lang="less" scoped>
.buttombu{
    text-align: center;
    padding-bottom: .2rem;
    >p{
    font-weight: 500!important;

    }
    >p:nth-child(2){
        font-size: .25rem;
        margin-bottom: 0;
    }
}
.Likeimg {
  width: 3.2536rem;
  height: 3.2536rem;
}
.root {
  font-size: 0.2rem;

  //   width: .9rem;
  > div {
    > p {
      font-size: 0.32rem;
      font-weight: 700;
      margin-left: 0.2rem;
    }
    > div {
      display: flex;
      justify-content: space-around;
      > div {
        > div {
          width: 3.532rem;
          margin-bottom: 0.2rem;
          text-align: left;
          border-radius: 0.2rem;
          background-color: rgb(255, 255, 255);
          > div {
            width: 100%;
            text-align: center;
            > img {
              width: 3.252rem;
              margin: 0 auto;
            }
          }
          .thitlegl {
            margin: 0.1rem;
          }
          .xhage {
            //   display: block;
            background-color: #fff;
            color: rgb(124, 123, 123);
            border: 1px solid rgb(179, 179, 179);
          }
          .price {
            margin: 0.1rem;
            color: #ff5757;
            font-size: 0.28rem;
            font-weight: 700;
          }
          .weikd {
            width: 0.9rem;
            height: 0.24rem;
            margin: 0.1rem 0;
            // margin-left: -2rem;
          }
          .jhbz {
            width: 0.26rem;
          }
          .mingc {
            font-size: 0.26rem;
            font-weight: 700;
          }
          > p {
            margin: 0;
          }
          .hdjx {
            box-sizing: border-box;
            margin: 0.1rem;
          }
          .zhanwei {
            display: block;
            width: 100%;
            height: 0.2rem;
          }
        }
      }
    }
  }
}
</style>